<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type='text/javascript' src="../js/d3.js"></script>
	<script type='text/javascript' src="../js/d3.time.js"></script>
	<script type='text/javascript' src="../js/selectbar.js"></script>
	<script type='text/javascript' src="../js/popcorn-complete.js"></script>
	<style>	
		svg {
		  font: 10px sans-serif;
		}		
		div#txtSelect { background-color: orange; } 
		div#txtAuto { background-color: red; } 
		path {
		  fill: steelblue;
		}
		.axis path, .axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}
	</style>
</head>
<body>
	<div id="titre" ><?php echo $this->urlTitre; ?></div>
	<div id="lien" ><?php echo $this->urlSon; ?></div>
    <audio controls='controls' id='audioW' src='<?php echo $this->urlSon; ?>' >
	</audio>
	<div id="divSVG" ></div>
	<div id="txtSelect" width="100%"></div>
	<div id="txtAuto" width="100%" ></div>
<script>
var allTexte = "<?php echo $this->texte; ?>";
var nbCarDeb = 0, nbCarFin = 0, nbCarTot = allTexte.length, arrMots = allTexte.split(" ");
var txtSelect = document.getElementById("txtSelect"), txtAuto = document.getElementById("txtAuto")
	, arrCar=[], arrSbSon = [], arrSbTxt = [], arrPhrases = [{pHTML:50},{pHTML:100}];

//construction du tableau des mots
for(i=0; i < arrMots.length; i++){
	nbCarFin += arrMots[i].length+1;
	arrCar.push({n:i,mot:arrMots[i],carDeb:nbCarDeb,carFin:nbCarFin});
	nbCarDeb = nbCarFin;
}


var margin = {top: 10, right: 10, bottom: 100, left: 40},
    mrgCntxSon = {top: 10, right: 10, bottom: 20, left: 40},
    width = 1000 - margin.left - margin.right,
    height = 10,
    hCntxSon = 20,
	mrgCntxText = {top: 60, right: 10, bottom: 10, left: 40},
	hCntxText = 20;

var xCntxSon = d3.time.scale().range([0, width]),
    yCntxSon = d3.scale.linear().range([hCntxSon, 0]),
    xCntxSonInv,
    xCntxTxt = d3.scale.linear().range([0, width]).domain([0, arrCar.length-1]),
	xCntxTxtInv = d3.scale.linear().range([0, arrCar.length-1]).domain([0, width]);

var xAxisCntxSon = d3.svg.axis().scale(xCntxSon).orient("top").tickFormat(d3.time.format.utc("%X")),
    xAxisCntxTxt = d3.svg.axis().scale(xCntxTxt).orient("bottom");

var svg = d3.select("#divSVG").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

var gCntxText = svg.append("g")
	.attr("transform", "translate(" + mrgCntxText.left + "," + mrgCntxText.top + ")");
gCntxText.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + hCntxText + ")")
		.call(xAxisCntxTxt);
gCntxText.append("text")
	   	.attr("class", "x axis")
		.attr("transform", "translate(-"+mrgCntxText.left+"," + hCntxText + ")")
		.text("texte");

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

var gCntxSon = svg.append("g")
    .attr("transform", "translate(" + mrgCntxSon.left + "," + mrgCntxSon.top + ")");
	
//utc important pour le calcul des secondes
var formatDate = d3.time.format.utc("%m/%d/%Y %X");

//variable pour la gestion de l'audio
var audioSource = '<?php echo $this->urlSon; ?>';
var audioW, nbSecDeb, nbSecFin, nbSecTot;
document.addEventListener('DOMContentLoaded', function () {
	audioW = Popcorn("#audioW");
	audioW.listen("timeupdate", function (evt) {
		var t = evt.currentTarget.currentTime;
		if(t>=nbSecFin)	audioW.pause();
	});
}, false);


d3.json("<?php echo $this->urlWave; ?>", function(data) {

	data.forEach(function(d) {
	    d.date = formatDate.parse(d.date);
	  });
	  	
  xCntxSon.domain(d3.extent(data.map(function(d) { return d.date; })));
  yCntxSon.domain([0, d3.max(data.map(function(d) { return d.y1; }))]);

  xCntxSonInv = d3.time.scale().range(d3.extent(data.map(function(d) { return d.date; }))).domain( [0, width]);

  gCntxSon.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + hCntxSon + ")")
      .call(xAxisCntxSon);
  gCntxSon.append("text")
	.attr("class", "x axis")
	.attr("transform", "translate(-"+mrgCntxSon.left+",30)")
	.text("audio");
    
});

for(i=0; i < arrPhrases.length; i++){
	arrSbSon.push(selectbar({wBar:10, wSel:30, x:arrPhrases[i]['pHTML'], width:width, hSel:hCntxSon, left:mrgCntxSon.left, top:mrgCntxSon.top+hCntxSon
		  , xCntx:xCntxSonInv, svg:svg, fncDragEnd:playSonSelect}));
	arrSbTxt.push(selectbar({wBar:10, wSel:30, x:arrPhrases[i]['pHTML'], width:width, hSel:hCntxText, left:mrgCntxText.left, top:mrgCntxText.top
			, xCntx:xCntxTxtInv, svg:svg, fncDragEnd:showTextSelect}));	
}

function playSonSelect(arrExt) {
	//calcule l'intervale en seconde
	nbSecDeb = arrExt[0] / 1000;
	nbSecFin = arrExt[1] / 1000;
	var d0 = new Date(arrExt[0]);
	var d1 = new Date(arrExt[1]);
	var queryTime = formatDate(d0)+" - "+formatDate(d1)+" = "+nbSecDeb+" - "+nbSecFin;
	console.log(queryTime);
	audioW.play(nbSecDeb);
	showTextAuto();
};


function showTextSelect(arrExt){
	//Récupère le nombre de caractère
	var arrMotDeb = arrCar[Math.round(arrExt[0])];
	var arrMotFin = arrCar[Math.round(arrExt[1])];
	var txt = allTexte.substring(arrMotDeb["carDeb"],arrMotFin["carFin"]);
	console.log("texte="+txt);
	txtSelect.innerHTML = txt;
}

function showTextAuto(){
	//calcule l'interval en texte
	nbSecTot = audioW.duration();
	nbCarDeb = Math.round(nbCarTot/nbSecTot*nbSecDeb);
	nbCarFin = Math.round(nbCarTot/nbSecTot*nbSecFin);
	var queryTexte = nbCarDeb+" - "+nbCarFin;
	console.log(queryTexte);
	var txt = allTexte.substring(nbCarDeb,nbCarFin);
	console.log("texte="+txt);
	txtAuto.innerHTML = txt;	
}
    </script>
  </body>
</html>	